<!doctype html>
<html class="no-js">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>流程历史记录查看</title>
	<meta name="description" content="">
	<link rel="stylesheet" href="../editor-app/libs/bootstrap_3.1.1/css/bootstrap.min.css" />
	<script src="../editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
	<script src="../editor-app/libs/angular_1.2.13/angular.min.js"></script>
	<script src="../editor-app/libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		.myContainer {
			width: 50%;
			display: inline-block;
			height: 100%;
			position: fixed;
			overflow: auto;
		}

		.left {
			border-right: 1px solid;
			text-align: center;
			display: -webkit-box;
			-moz-box-align: center;
			-webkit-box-align: center;
			-moz-box-pack: center;
			-webkit-box-pack: center;
		}

		.right {
			width: calc(50% - 20px);
			right: 0px;
		}
	</style>
</head>

<body ng-app="App" ng-controller="AppCtrl" class="container-fluid">
	<div class="myContainer left">
		<img id="myImage" />
	</div>

	<div class="myContainer right">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th width="50px">#</th>
					<th width="100px">类型</th>
					<th width="150px">名称</th>
					<th width="250px">开始时间</th>
					<th width="250px">结束时间</th>
					<th width="150px">持续时间（s）</th>
					<th width="150px">办理人</th>
					<th width="200px">批注</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat=" dataItem in list ">
					<td ng-bind="$index+1">1</td>
					<td>{{dataItem.activityType}}</td>
					<td>{{dataItem.activityName}}</td>
					<td>{{dataItem.startTime}}</td>
					<td>{{dataItem.endTime}}</td>
					<td>{{dataItem.durationInMillis}}</td>
					<td>{{dataItem.assignee}}</td>
					<td>{{dataItem.comment}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		var app = angular.module('App', []);
		app.controller('AppCtrl', function ($scope, $http, $location) {
			var processInstanceId = getQueryString("processInstanceId");
			$scope.list = [];
			$scope.historyActInstanceList = function (processInstanceId) {
				$scope.list = [];
				var url = "/define/historyActInstanceList?processInstanceId=" + processInstanceId;
				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.list = response.data.data;
						console.log($scope.list);
					} else {
						alert("查询失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}
			$scope.historyActInstanceList(processInstanceId);
			//设置流程图
			document.getElementById("myImage").src = "/task/viewProgressPathImage?processInstanceId=" + processInstanceId;
		});
		//活路路径参数
		function getQueryString(name) {
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			}
			return "";
		}

	</script>
</body>

</html>